import React,{useEffect,useState} from 'react';
import {message,Popconfirm} from 'antd';
import {useLocation,useNavigate} from 'react-router-dom';

import './index.less';
import {reqWeather} from '../../api';
import {formateDate} from '../../utils/dateUtils';
import memoryUtils from '../../utils/memoryUtils';
import {items} from '../../config/menuListConfig';
import {removeUser} from '../../utils/storageUtils';
import LinkButton from '../LinkButton';

/**
 * 二级路由 右侧头部
 */
function RightHeader(){
  // 从内存中获取用户信息
  const user = memoryUtils.user;
  //获取当前选中的路由路径
  const location = useLocation();
  const path = location.pathname;
  // navigate跳转路由
  const navigate = useNavigate();
  //存储当前时间
  const [reporttime,setReporttime] = useState(formateDate(Date.now()));
  //存储当前天气信息
  const [weather,setWeather] = useState();
  //存储title
  const [title,setTitle] = useState();

  //如果path发生变化重新调用获取当前标题的方法
  useEffect(function(){
    /**
     * 获取当前标题方法
     */
    function getTitle(){
      // 遍历items
      items.map(function(item){
        //如果items的item的key是否等于path
        if(item.key === path){
          setTitle(item.title);
        }else if(item.children){
          // 如果item.children不等于空则遍历
          item.children.map(function(cItem){
            if(cItem.key === path){
              setTitle(cItem.title);
            }
          });
        }
      });
    }
    //调用获取当前标题方法
    getTitle();
  },[path]);

  /**
   * 获取上海的天气信息
   */
  async function getWeather(){
    const {weather} =await reqWeather();
    setWeather(weather);
  }

  /**
   * 页面加载时调用定时器，每一秒钟执行一次
   * 获取到当前时间，存储到reporttime中
   */
  function getTime(){
    return setInterval(function(){
      setReporttime(formateDate(Date.now()));
    },1000);
  }

  //页面加载前执行
  useEffect(function(){
    //调用获取上海的天气信息
    getWeather().then();
    //调用获取时间定时器
    getTime();
    // 如果卸载组件则清除定时器
    return clearInterval(getTime());
  },[]);

  /**
   * 退出登录
   */
  function confirm(){
    // 删除内存中的用户
    memoryUtils.user = {};
    //删除本地的user存储
    removeUser();
    // 跳转到登录页面
    navigate('/login',{replace: true});
    message.success("已退出！").then();
  }

  return (
    <div className="right-header">
      <div className="right-header-top">
        <span>
          欢迎 {user ? user.username : ""}
        </span>
        <Popconfirm title="是否确认退出?" onConfirm={confirm} okText="是" cancelText="否">
          <span>
            <LinkButton>退出</LinkButton>
          </span>
        </Popconfirm>
      </div>
      <div className="right-header-bottom">
        <div className="left">{title}</div>
        <div className="right">
          <span>{reporttime}</span>
          <span>{weather}</span>
        </div>
      </div>
    </div>
  );
}

export default RightHeader;